<template>

  <div v-if="show" style="display: inline-block;padding: 0 0 0 100px;">
    <el-button v-if="status == 1" @click="courseStop" type="danger">暂停</el-button>

    <div v-if="status == 2" style="display: inline-block; padding: 0 0 0 30px;color: #f56c6c;">
      课程暂停中，<el-button @click="cancelStop" size="medium" type="text">点击取消暂停</el-button>
    </div>

    <div v-if="status == 3" style="display: inline-block; padding: 0 0 0 30px;color: #f56c6c;">
      课程已暂停，<el-button @click="courseStart" size="medium" type="danger">点击恢复</el-button>
    </div>

    <div v-if="status == 4" style="display: inline-block; padding: 0 0 0 30px;color: #f56c6c;">
      课程恢复中，<el-button @click="cancelStart" size="medium" type="text">点击取消恢复</el-button>
    </div>

    <div style="display: inline-block; padding: 0 0 0 30px;">
      <el-button @click="open" type="success">
        <i class="el-icon-s-order"></i>查看变更记录
      </el-button>
    </div>

    <el-dialog title="变更记录" :visible="visible" width="50%" :before-close="close" :append-to-body="true">

      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="effectiveTime" label="合约状态变更时间">
        </el-table-column>
        <el-table-column label="变更状态">
          <template slot-scope="scope">
            <div v-if="scope.row.action == 'STOP'">暂停<label v-if="scope.row.state == 0">中</label></div>
            <div v-else>恢复<label v-if="scope.row.state == 0">中</label></div>

          </template>
        </el-table-column>
        <el-table-column prop="createName" label="操作人">
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="close">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { optStop, optRestart, optList } from '@/api/courseApi'
export default {
  props: {
    courseDetail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      show: false,
      visible: false,
      tableData: [],
      status: 0, // 1、正常；2、暂停中；3、暂停；4、恢复中
    }
  },
  watch: {

    async courseDetail() {
      await this.getRecord()


    }
  },
  methods: {
    async open() {
      this.visible = true

    },
    close() {
      this.visible = false
    },

    async courseStop() {

      this.courseDetail.expirationEndTime
      let time = new Date(this.courseDetail.expirationEndTime).getTime() - new Date().getTime()
      if (time < 1000 * 3600 * 24) {
        this.$alert('合约状态有效期不足24小时，无法暂停', '提示', {
          confirmButtonText: '确定',
          type: 'warning'

        });
        return
      }



      await this.$confirm('合约状态变更将于次日生效', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })

      var params = {
        id: this.courseDetail.id
      }
      const loading = this.$loading()
      const res = await optStop(params)
      loading.close()
      console.log(res)
      if (res.code != 200) {
        this.$message({
          message: res.msg,
          duration: 2000,
          type: 'error'
        })
        return
      }


      this.$message({
        message: res.msg,
        duration: 2000,
        type: 'success'
      })

      await this.getRecord()

    },

    async cancelStop() {
      var params = {
        id: this.courseDetail.id
      }
      const loading = this.$loading()
      const res = await optRestart(params)
      await this.getRecord()
      loading.close()
    },

    async courseStart() {
      await this.$confirm('合约状态变更将于次日生效', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      var params = {
        id: this.courseDetail.id
      }
      const loading = this.$loading()
      const res = await optRestart(params)

      this.$message({
        message: res.msg,
        duration: 2000,
        type: 'success'
      })

      await this.getRecord()
      loading.close()
    },

    async cancelStart() {
      var params = {
        id: this.courseDetail.id
      }

      const loading = this.$loading()
      const res = await optStop(params)
      console.log(res)
      await this.getRecord()
      loading.close()
    },

    async getRecord() {
      let res = await optList({ signCourseId: this.courseDetail.id })
      this.tableData = res.data
      debugger

      if (this.courseDetail.courseSnapshot.courseType != 1) {
        return
      }
      if (this.courseDetail.saleMode != 1) {
        return
      }
      if (this.courseDetail.signCourseState == 2 || this.courseDetail.signCourseState == 3) {

      } else {
        return
      }


      // 正常
      // 暂停中
      // 暂停
      // 恢复中
      if (this.courseDetail.signCourseState == 2) {
        this.status = 1
        if (this.tableData.length > 0) {
          let state = this.tableData[this.tableData.length - 1].state
          if (state == 0) {
            this.status = 2
          }
        }
      }

      if (this.courseDetail.signCourseState == 3) {
        this.status = 3
        if (this.tableData.length > 0) {
          let state = this.tableData[this.tableData.length - 1].state
          if (state == 0) {
            this.status = 4
          }
        }
      }

      this.show = true
    }
  },

}
</script>
<style scoped></style>
